<template>
  <div class="page-skin bg-white">
    <div class="topbar bg-black py-2 px-3 d-flex ai-center">
      <img src="../assets/logo.png" height="30">
      <div class="pl-2 flex-1">
        <div class="text-white">王者荣耀</div>
        <div class="text-grey-1 fs-12">团队成就更多</div>
      </div>
    </div>
    <swiper :options="swiperOption" v-if="skins.length>0">
      <swiper-slide v-for="(item, index) in skins" :key="index">
        <img class="w-100" :src="`${baseUrl}${index+1}.jpg`"/>
        <p class="text-center">{{item}}</p>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true }
  },
  data () {
    return {
      skins: [],
      baseUrl: `https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/${this.id}/${this.id}-mobileskin-`,
      swiperOption: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  methods: {
    async getHero () {
      const { data: res } = await this.$http.get(`/skins/${this.id}`)
      this.skins = res
    }
  },
  created () {
    this.getHero()
  }
}
</script>

<style lang="less" scoped>
.page-skin {
  min-height: 100vh;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 999;
}
.swiper-container {
  margin: 5px 5px 0;
  padding-bottom: 20px;
  .swiper-pagination {
    bottom: 0;
    /deep/.swiper-pagination-bullet {
      opacity: 1;
      width: .769231rem /* 10/13 */;
      height: .384615rem /* 5/13 */;
      border-radius: .192308rem /* 2.5/13 */;
      background-color: #bababa;
    }
    /deep/.swiper-pagination-bullet-active {
      background-color: #161725;
      transform: scaleX(1.5);
      transition: .3s;
    }
  }
}
</style>
